<template>
	<view>

		<view class="play">
			<view class="mgAuto mb20">
				{{times}}
			</view>
			<image v-show="!isplay" src="../../static/img/record.png" mode="" @click="startRecord"></image>
			<image v-show="isplay" src="../../static/img/recordStop.png" mode="" @click="endRecord"></image>
		</view>
		<view class="btnBox">
			<view class="btn cfff btn1" @click="playVoice">
				{{videoplay?'暂停播放':'播放音频'}}
			</view>
			<view class="btn cfff btn2" @click="submit">
				提交音频
			</view>
		</view>
	</view>
</template>

<script>
	/* const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	innerAudioContext.autoplay = true; */
	export default {
		data() {
			return {
				text: 'uni-app',
				voicePath: '',
				url: '',
				videoplay: false,
				isplay: false,
				times: '',
				interval: null,
				recorderManager: null,
				innerAudioContext: null
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				console.log(111);
				this.recorderManager = uni.getRecorderManager();
				this.innerAudioContext = uni.createInnerAudioContext()

				console.log(this.recorderManager, '111');
				this.recorderManager.onStop((res) => {
					console.log('recorder stop' + JSON.stringify(res));
					this.voicePath = res.tempFilePath;
				});
			},
			startRecord() {
				console.log('开始录音', this.recorderManager);
				this.isplay = !this.isplay
				this.countTime()
				this.recorderManager.start({
					duration: 600000
				});
			},
			endRecord() {
				console.log('录音结束');
				this.isplay = !this.isplay
				clearInterval(this.interval)
				this.recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音', this.innerAudioContext);
				console.log(this.voicePath);

				if (this.voicePath) {
					if (this.videoplay) {
						this.innerAudioContext.pause()
						this.videoplay = false
					} else {
						this.innerAudioContext.src = this.voicePath;
						this.innerAudioContext.play();
						this.videoplay = true
					}
				} else {
					this.$tools.toast('音频暂未提交！');
				}
			},
			countTime() {
				let n1 = new Date()
				this.interval = setInterval(() => {
					let n2 = new Date()
					let t = Math.round(parseInt(n2 - n1) / 1000)
					this.times = this.$tools.secondsForamt(t)
					console.log(t, this.times, 'time');
				}, 1000)
			},
			submit() {
				console.log('url',this.url);
				if (this.url != '') {
					this.$emit('submit', this.url)
					return
				}
				if (!this.voicePath) {
					this.$tools.toast('请结束录音后提交！');
					return
				}
				uni.showLoading({
					title: '上传中'
				})

				var deviceId;
				uni.getSystemInfo({
					success: function(res) {
						deviceId = res.deviceId
					}
				});
				uni.uploadFile({
					url: this.$url + 'mobile/index/uploadstream',
					header: {
						'Authorization': uni.getStorageSync('token'),
						"deviceId": deviceId
					},
					filePath: this.voicePath,
					formData: {
						file_type: 'mp3'
					},
					name: 'file',
					success: (res) => {
						console.log(res.data);
						uni.hideLoading()
						let res1 = JSON.parse(res.data)
						if (res1.code == 200) {
							this.$tools.toast(res1.msg);
							this.url = res1.data.url
							this.$emit('submit', this.url)
						} else {
							this.$tools.toast(res1.msg);
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.play {
		position: absolute;
		bottom: 24vh;
		text-align: center;
		// margin-top: 10vh;
		left: 50%;
		transform: translate(-50%);

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.btnBox {
		position: fixed;
		bottom: 60rpx;
		width: 94vw;
		left: 3vw;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 45vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: #fff;
		}

		.btn1 {
			background-color: #6a8bff;
		}

		.btn2 {
			background-color: #5ac725;
		}

	}
</style>